﻿@model Small.Test.Student
@using Small.UI.Validator;
@using Small.Html.UI;
@using Small.Html.Options;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Links{
          <link href="~/Scripts/EasyUI-1.30/themes/default/easyui.css" rel="stylesheet" />
          <link href="~/Scripts/jquery-ui-1.10/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.css" rel="stylesheet" />
    }
@section Scripts {
      <script src="~/Scripts/EasyUI-1.30/jquery.easyui.min.js"></script>
      <script src="~/Scripts/EasyUI-1.30/locale/easyui-lang-zh_CN.js"></script>
      <script src="~/Scripts/jquery-ui-1.10/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js"></script>
   <script type="text/javascript">



       $(function () {


           $('#signupForm').validate();


           $('#signupForm').submit(function () {


               return $(this).Valid();


           })


           function autoCompleteSelected(event, ui) {
               $("#project").val(ui.item.label);

               this.terms.push(this.value);
               this.value = this.terms.join(",");
               alert(ui.item.value);
               return false;

           }



           function auto_split(val) {
               return val.split(/,\s*/);
           }
           function auto_extractLast(term) {
               return auto_split(term).pop();
           }


           function DisplayStyle(item) {

               return "<a>" + item.label + "<br>" + item.value + "</a>";
           }

           @Html.AutoCompleteMultipleValue("project", new AutoCompleteOptions { Source = "/AutoComplete/Index", MinLength = 1, DisplayStyle="DisplayStyle" });

           //$("#project")      // don't navigate away from the field on tab when selecting an item     
           //    .bind( "keydown", function( event ) {     
           //        if ( event.keyCode === $.ui.keyCode.TAB &&  $( this ).data( "ui-autocomplete" ).menu.active ) 
           //        {         
           //            event.preventDefault();      
           //        }     
           //    }) .autocomplete({   
           //        source: function( request, response ) {     
           //            $.getJSON("/AutoComplete/Index", { term: request.term.split(/,\s*/).pop() }, response);
           //        },      
           //        search: function() {  
           //            // custom minLength          
           //            var term = this.value.split(/,\s*/).pop();
           //            if ( term.length < 2 ) {           
           //            return false;         
           //            }       
           //        },       
           //        focus: function() {  
           //            // prevent value inserted on focus         
           //            return false;       
           //        },       
           //        select: function( event, ui ) {  
           //            var terms = this.value.split(/,\s*/);          // remove the current input          
           //            terms.pop();          // add the selected item         
           //            terms.push(ui.item.value);          // add placeholder to get the comma-and-space at the end  
           //            terms.push("");
           //            this.value = terms.join(", ");
           //            return false;
           //        }
           //    }).data("ui-autocomplete")._renderItem = function (ul, item) {
           //        return $("<li>").append(AutoDisplayStyle(item)).appendTo(ul);
           //    };

           function AutoDisplayStyle(item) {
               return "<a>" + item.label + "<br>" + item.value + "</a>";
           };
       })

        
   </script>
}
<h2>Index</h2>




@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "signupForm" }))
{
     

    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Student</legend>

    自动完成测试：
        <input type="text" id="project" />
        <div class="editor-label">
            @Html.LabelFor(model => model.StudentName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.StudentName)
           
        </div>

        <div class="editor-field">
            @Html.EditorFor(model => model.Students.StudentName)
          
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.NumberBoxFor(p => p.Age, 
            null, 
            new NumberBoxOptions { Required=true, MissMessage="年龄不能为空" }, null)
          
        </div>

        <div class="editor-label">

            
            @Html.LabelFor(model => model.Address)
              @Html.ValidateBoxFor(p => p.Address, new ValiDateBoxOptions {  Required=true, MissMessage="地址是必填",ValidType="email",InvalidMessage="无效的Email地址"},null) 
        </div>
        <div class="editor-field">
           
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
          
        </div>

        <select  class="easyui-combobox" data-options="required:true" >
            <option value="">请选择</option>
            <option value="A">A</option>
             <option value="B">B</option>
             <option value="C">C</option>
             <option value="D">D</option>
             <option value="E">E</option>
        </select>
          <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="easyui-validatebox" data-validFlag="true"  data-options="required:true" />
             @Html.DateBox("Test", new DateBoxOptions { Required=false })
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="easyui-validatebox" data-validFlag="true"   data-options="required:true" />
 </p>
        <p>
            
            <input type="submit" value="Create" />
        </p>

        
    </fieldset>
}


<div>
    
</div>


